<template>
  <div class="big-box">
    <el-select v-if="userInfo.userRole === 1" v-model="pageParams.username" placeholder="打卡人" @change="punchInfoByName">
      <el-option
        v-for="item in punchName"
        :key="item.username"
        :label="item.username"
        :value="item.username">
      </el-option>
    </el-select>
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column v-for="(value, key) in tableLabel" :key="key" :prop="key" :label="value">
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageParams.currentPage"
      :page-sizes="[5, 10]"
      :page-size="pageParams.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>
</template>

<script>
import {mapState} from 'vuex'
export default {
  name: "PunchRecord",
  data() {
    return {
      tableLabel: {
        username: "姓名",
        temperature: "体温",
        status: "状态",
        address: "地址",
        punchDate: "打卡时间"
      },
      pageParams: {
        currentPage: 1,
        pageSize: 5,
        username: null
      }
    }
  },
  methods: {
    handleSizeChange(val) {
      this.pageParams.pageSize = val;
      this.$store.dispatch("punchRecord", this.pageParams);
    },
    handleCurrentChange(val) {
      this.pageParams.currentPage = val;
      this.$store.dispatch("punchRecord", this.pageParams);
    },
    punchInfoByName(val) {
      this.pageParams.username = val;
      this.$store.dispatch("pageTotal", this.pageParams.username);
      this.$store.dispatch("punchRecord", this.pageParams);
    }
  },
  mounted() {
    this.$store.dispatch("pageTotal", this.pageParams.username);
    this.$store.dispatch("punchRecord", this.pageParams);
    this.$store.dispatch("setPunchName");
  },
  computed: {
    ...mapState({
      tableData: (state) => state.home.punchRecord,
      total: (state) => state.home.pageTotal,
      userInfo: (state) => state.user.userInfo,
      punchName: (state) => state.home.punchName
    })
  }
}
</script>

<style lang="less" scoped>
.big-box{
  margin-top: 30px;
}
select{
  width: 100px;
  height: 35px;
}
</style>
